<template>
  <div
    class="room-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '46px' }"
  >
    <Search
      style="padding-top:0.1rem"
      ref="topSearch"
      class="search"
      placeholder="工单编号 | 物品名称"
      :isAdd="false"
      :isScreen="false"
      :isType="true"
      @onSearch="onSearch"
    ></Search>
    <!-- <div class="outBox">
      <van-dropdown-menu active-color="#1989fa" style="width:50%">
        <van-dropdown-checkbox
          title="物品类型"
          :key="selecKeyType"
          :selectValue="valueType"
          :columns="goodTypeList"
          @comfirm="typeChange"
        >
        </van-dropdown-checkbox>
      </van-dropdown-menu>
      <div class="capitalflow-topl" @click.stop="clickClassification">
        <span>{{
          dropdownObj.categoryText ? dropdownObj.categoryText : "物品分类"
        }}</span>
      </div>
    </div> -->
    <!--分页列表 -->
    <div class="listBox">
      <pageListak
        :usedGetMethods="false"
        @getCheckedValue="getCheckedValue"
        ref="pageListak"
        :singelInfo="true"
        :operationTxt="operationTxt"
        :checkedShow="checkedShow"
        checkedShowText="全选"
        :columns="columns"
        :listUrl="listUrl"
        :minLen="3"
      />
    </div>

    <van-popup v-model="showTree" position="bottom">
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="confirmTree">
          取消
        </button>
        <button type="button" class="van-picker__confirm" @click="confirmTree">
          确认
        </button>
      </div>
      <van-tree-select
        :items="categoryList"
        :active-id="dropdownObj.category"
        :main-active-index.sync="activeIndex"
        @click-item="clickItem"
      />
    </van-popup>
  </div>
</template>

<script>
import Search from "@/components/search";
import pageListak from "@/components/pageList/pageListAk";
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import { getDictModel, categoryGetTree } from "@/api/system.js";
export default {
  components: { pageListak, Search, VanDropdownCheckbox },
  props: {
    listUrl: {
      //列表接口
      type: String,
      default: "",
    },
    columns: {
      type: Object,
      default: {
        titleKey: "goodsName", //标题
        content: [
          //内容
          {
            name: "物品编号",
            key: ["goodsCode"],
          },
          {
            name: "分类",
            key: ["categoryText"],
          },
        ],
        labelKey: ["typeText", "spec"], //标签
        operationText: "",
      },
    },
    selectedProduceOrder: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      keyword: "",
      filterForm: {},
      appTitle: "",
      checkedShow: true, //列表是否支持选择
      operationTxt: "确定", //选择按钮名称
      itemInfo: {},
      /* 物品类型、分类筛选配置 begin */
      selecKeyType: 1,
      valueType: [],
      goodTypeList: [],
      categoryList: [],
      showTree: false,
      dropdownObj: {
        type: "",
        category: "",
        categoryText: "",
      },
      activeIndex: 0,
      /* 物品类型、分类筛选配置 end */
    };
  },
  created() {
    this.getBasicData();
  },
  mounted() {
    let searchObj = {
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    getBasicData() {
      // 类型字典
      let parameters = { dictCode: "wms_goods_type" };
      getDictModel(parameters).then((res) => {
        if (res.code == 200) {
          this.goodTypeList = res.result;
        }
      });
      // 取分类树
      categoryGetTree({ code: "B05" }).then((res) => {
        this.categoryList = res.result[0].children;
        if (this.categoryList.length > 0) {
          this.recursion(this.categoryList);
        }
      });
    },
    recursion(newArray) {
      newArray.forEach((item) => {
        item.text = item.name;
        if (item.children.length > 0) {
          this.recursion(item.children);
        }
      });
    },
    typeChange(v) {
      this.valueType = v.split(",");
      this.valueType = this.valueType.filter((item) => item);
      this.dropdownObj.type = v;
      this.selecKeyType += 1;
      this.dropDownChang();
    },
    dropDownChang() {
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    clickClassification() {
      this.showTree = true;
    },
    confirmTree() {
      this.showTree = false;
    },
    clickItem(v) {
      if (!this.dropdownObj.category) {
        this.dropdownObj.categoryText = v.text;
        this.dropdownObj.category = v.id;
      } else {
        this.dropdownObj.categoryText = "";
        this.dropdownObj.category = "";
      }
      this.dropDownChang();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, selectArr) {
      if (selectArr.length > 0) {
        if(selectArr.length == 1) {
          this.$emit("getCheckedProduceOrder", selectArr);
        }else {
          this.$toast("生产工单为单选项");
        }
      } else {
        this.$toast("请先选择数据");
      }
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.$refs.pageListak.searchQuery(params, this.selectedProduceOrder);
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.capitalflow-topl {
  width: 50%;
  .flex(center, center);
  span {
    display: block;
    position: relative;
    font-size: 30px;
    color: #191F25;
  }
  span::after {
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
}
.outBox {
  display: flex;
  background-color: #fff !important;
}
.room-content {
  height: calc(100vh - 0);
  width: 100%;
  overflow-y: scroll;
  position: fixed;
  background: #f5f5f5;
  z-index: 999;
  .serach {
    height: 66px;
    background: #f2f2f6;
    border-radius: 0;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 66px;
    padding: 20px 24px;
    // border: 1px solid red;
    .placeh {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46px;
    }
    .icon {
      width: 30px;
      height: 32px;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 32px 0.32px 32px;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 4px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 46px;
        margin-right: 32px;
        text-align: center;
        padding: 8px 56px;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.listBox {
  height: calc(100vh - 300px);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 20px 38px;
  color: #191f25;
  font-size: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
</style>
